<html>
	<head>
		<title>jQuery Image Rotator Test Page</title>
		<script type='text/javascript' language='javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script>
		<script type='text/javascript' language='javascript' src='./jQuery.imageRotator.js'></script>
		
		<!-- The prettyPhoto plugin is available at http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/ -->
		<script type='text/javascript' language='javascript' src='./prettyphoto/js/jQuery.prettyPhoto.js'></script>
		<link type='text/css' rel='stylesheet' href='./prettyphoto/css/prettyPhoto.css'></link>
	</head>
	<body>
		<table style='width:200px;height:200px;padding:0;'>
			<tr>
				<td id='imageRotator' style='padding:0;margin:0;border:1px solid black;'>
					<a href='#' class='imageRotator'>
						<!-- By setting the max width/height and using expressions for width/height we constrain the image's size regardless of the rotated items-->
						<img style='max-width:200px;max-height:200px;width:expression(this.width > 200px ? 200px : true);height:expression(this.height > 200px ? 200px : true)'
							class='imageRotator' src='http://www.freefoto.com/images/01/07/01_07_1---Pair-of-Dogs_web.jpg' alt='A pair of dogs' />
					</a>
				</td>
			</tr>
		</table>
		
		<script type='text/javascript' language='javascript'>
			$(document).ready(function(){
				$('#imageRotator').imageRotator({
					'images':[{"src":"http://www.freefoto.com/images/01/07/01_07_1---Pair-of-Dogs_web.jpg","alt":"A pair of dogs","href":"http://www.freefoto.com/images/01/07/01_07_1---Pair-of-Dogs_web.jpg"},{"src":"http://www.costumedogs.com/wp-content/uploads/2007/07/tux.jpg","alt":"LOL Top Hat!","href":"http://www.costumedogs.com/wp-content/uploads/2007/07/tux.jpg"}],
					'rotationTimerMs':2000
				});
				
				$('a.imageRotator').prettyPhoto();
			});
		</script>
	</body>
</html>